<template>
  <div id='stores_detail'>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商品信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12"
               class="detail-table__col">
          分类名称：<span>{{detail.parentCategoryName}} - {{detail.categoryName}}</span>
          </Col>
          <Col span="12"
               class="detail-table__col">
          所属组织：{{detail.orgTagName}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          商品名称：{{detail.skuName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          副标题：{{detail.subTitle}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          供应商：{{detail.supplierName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          对应设备名称：{{detail.suppNameShorten}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          采购单价：{{detail.standardPrice}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          商品条码：{{detail.barcode}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          商品规格：{{detail.specification}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          商品单位：{{['个'][detail.goodsUnit]}}
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="60"
                  valign="top">商品图片：</td>
              <td class="detail-table-multimedia">
                <div :class="idx===0 ? 'detail-table-multimedia-frist' : ''"
                     v-for='(item,idx) in multimedia'
                     :key='idx'>
                  <img :src="item.multUrl"
                       alt=""
                       style="width: 96px;height: 96px;margin-right:20px">
                </div>
              </td>
            </tr>
          </table>
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="80"
                  valign="top">商品关键词：</td>
              <td style="word-break: break-all;">{{detail.keywords}}</td>
            </tr>
          </table>
          </Col>
        </Row>
        <Row>
          <Col span="24"
               class="detail-table__col">
          <table>
            <tr>
              <td width="60"
                  valign="top">商品备注：</td>
              <td style="word-break: break-all;">{{detail.remark}}</td>
            </tr>
          </table>
          </Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>操作日志</h3>
      </div>
      <Table :columns="columnsAttr"
             :data="tableDataAttr"
             style="margin-top: 15px"
             :loading="loading"
             border>
        <template slot-scope="{ row }"
                  slot="propValue">
          <span>{{row.colName}}{{row.oldValue}}{{row.newValue}}</span>
        </template>
      </Table>
      <Row type='flex'
           justify="end"
           style='padding: 20px'>
        <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts='[10,20,30,40]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { inventoryGoodsGet, inventoryLog } from '@/api/purchase/index'
export default {
  name: 'stores_detail',
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId
    })
  },
  data () {
    return {
      detail: {},
      tableDataAttr: [],
      gameCouponExtra: {},
      options: [],
      shopName: '',
      tableData: [],
      priceList: [], // 价格
      gamesList: [], // 局数
      priceVlue: '', // 价格值
      gamesValue: '', // 局数值
      goodsUnitList: [
        { value: 0, label: '个' },
        { value: 1, label: '枚' },
        { value: 2, label: '份' }
      ],
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      loading: false,
      columnsAttr: [
        {
          title: '操作者',
          key: 'modifierName'
        },
        {
          title: '操作时间',
          key: 'modifyTime'
        },
        {
          title: '日志记录',
          slot: 'propValue'
        }
      ],
      columns: [
        {
          title: '商品条码',
          key: 'barcode'
        },
        {
          title: '商品名称',
          key: 'skuName'
        },
        {
          title: '单位',
          slot: 'goodsUnit'
        },
        {
          title: '数量',
          key: 'num'
        }
      ],
      goodsKindList: [],
      multimedia: []
    }
  },
  mounted () {
    this.getDetail()
    this.getLog()
  },
  methods: {
    getEnumsName (value, enums) {
    },
    getDetail () {
      inventoryGoodsGet({
        merchantId: this.merchantId,
        skuId: this.$route.query.id
      }).then(res => {
        if (res.data.status === 200) {
          this.detail = res.data.data || {}
          this.multimedia = res.data.data.multimedia
        } else {
          this.$Message.error(`${res.data.message}`)
        }
      })
    },
    getLog () {
      this.loading = true
      inventoryLog({
        merchantId: this.merchantId,
        pageNo: this.pageObj.pageIndex,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        let result = res.data || {}
        if (result.status === 200) {
          this.tableDataAttr = result.data.records
          this.pageObj.total = result.data.total
        } else {
          this.$Message.error(`${result.message}`)
        }
      })
    },
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      this.getLog()
    },
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      this.getLog()
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
#stores_detail {
  padding: 25px 100px;
  .container {
    margin-bottom: 70px;
    .commodity-title {
      display: flex;
      margin-bottom: 30px;
      p {
        width: 8px;
        height: 20px;
        margin-right: 10px;
        background-color: #2d8cf0;
      }
    }
  }
  .detail-table-multimedia {
    display: flex;
  }
  .detail-table-multimedia-frist {
    position: relative;
    &::after {
      content: '商品主图';
      display: block;
      position: absolute;
      top: 5px;
      left: 5px;
      background: #e7314e;
      height: 21px;
      padding: 2px 5px;
      // width: 48px;
      font-size: 12px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
